<template>
  <div style="margin-top: 20px">
    <el-row>
      <el-input v-model="input" placeholder="请输入姓名" style="width: 300px" />&nbsp;
      <el-button
        icon="el-icon-search"
        type="primary"
        @click="search(input)"
      />
      <el-button type="warning" icon="el-icon-circle-plus-outline" @click="dialogFormVisible = true">新增</el-button>
    </el-row>
    <br>
    <div>
      <el-table
        v-loading="loading"
        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        border
      >
        <el-table-column
          fixed
          prop="fileNumber"
          label="体检时间"
          width="150"
        />
        <el-table-column
          fixed
          prop="fileNumber"
          label="档案号"
          width="150"
        />
        <el-table-column
          prop="name"
          label="姓名"
          width="120"
        />
        <el-table-column
          prop="phoneNumber"
          label="手机号码"
          width="120"
        />
        <el-table-column
          prop="city"
          label="检测套餐"
          width="120"
        />
        <el-table-column
          prop="address"
          label="报告状态"
          width="300"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="300"
        >
          <template v-slot="scope">
            <el-button type="warning" size="small" icon="el-icon-edit" @click="opensave = true">编辑</el-button>
            <el-button type="danger" size="small" icon="el-icon-delete" @click="open">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="currentPage4"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <div>
      <el-dialog title="上转报告" :before-close="openUAdd" :visible.sync="dialogFormVisible">
        <el-form :inline="true" :model="form" class="demo-form-inline" style="flex: 1;">
          <el-form-item label="档案号" style="width: 45%;" class="custom-margin">
            <el-input
              v-model="addForm.username"
              placeholder="档案号"
              style="margin-left: 46px;"
              class="custom-input "
            />
          </el-form-item>
          <el-form-item label="姓名" prop="name" style="width: 45%;">
            <el-input v-model="addForm.name" class="custom-input" style="margin-left: 33px;" />
          </el-form-item>
          <el-form-item label="体检时间" prop="name" style="width: 55%;">
            <el-input v-model="addForm.name" class="custom-input" style="margin-left: 33px;" />
          </el-form-item>
          <el-form-item label="文件数据" prop="name" style="width: 45%;">
            <el-input v-model="addForm.name" class="custom-input" style="margin-left: 33px;" />
            <el-upload>
              <el-button slot="trigger" size="small" type="primary" class="custom-input" style="margin-left: 33px;">选取文件</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="openUAdd()">取 消</el-button>
          <el-button type="primary" @click="openOk('添加成功');dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div>
      <el-dialog title="修改" :before-close="openUpdate" :visible.sync="UpdateData">
        <el-form :model="updatefrom">
          <el-form-item label="活动名称" :label-width="formLabelWidth">
            <el-input v-model="updatefrom.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="活动区域" :label-width="formLabelWidth">
            <el-select v-model="updatefrom.date" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai" />
              <el-option label="区域二" value="beijing" />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="openUpdate()">取 消</el-button>
          <el-button type="primary" @click="openOk('修改成功');UpdateData = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div>
      <el-dialog title="新 增" :before-close="opensaves" :visible.sync="opensave">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="first">
            <el-form :inline="true" :model="form" class="demo-form-inline" style="flex: 1;">
              <el-form-item label="档案号" style="width: 45%;" class="custom-margin">
                <el-input v-model="addForm.username" placeholder="档案号" style="margin-left: 20px;" class="custom-input " />
              </el-form-item>
              <el-form-item label="身份证" prop="password" style="width: 45%;" class="custom-margin">
                <el-input v-model="addForm.password" style="margin-left: 25px;" class="custom-input " />
              </el-form-item>
              <el-form-item label="登录密码" prop="email" style="width: 45%;" class="custom-margin">
                <el-input v-model="addForm.email" style="margin-left: 5px;" class="custom-input " />
              </el-form-item>
              <el-form-item label="手机号" prop="mobile" style="width: 45%;">
                <el-input v-model="addForm.mobile" style="margin-left: 25px;" class="custom-input " />
              </el-form-item>
              <el-form-item label="姓名" prop="name" style="width: 45%;">
                <el-input v-model="addForm.name" class="custom-input" style="margin-left: 33px;" />
              </el-form-item>
              <el-form-item label="性别" prop="gender" style="width: 45%;">
                <el-input v-model="addForm.gender" style="margin-left: 40px;" class="custom-input " />
              </el-form-item>
              <el-form-item label="民族" prop="ethnicity" style="width: 45%;">
                <el-input v-model="addForm.ethnicity" class="custom-input" style="margin-left: 33px;" />
              </el-form-item>
              <el-form-item label="年龄" prop="age" style="width: 45%;">
                <el-input v-model="addForm.age" style="margin-left: 40px;" class="custom-input " />
              </el-form-item>
              <el-form-item label="出生日期" prop="birthdate" style="width: 45%;">
                <el-input v-model="addForm.birthdate" style="margin-left: 5px;" class="custom-input " />
              </el-form-item>
              <el-form-item label="邮箱" prop="email" style="width: 45%;">
                <el-input v-model="addForm.email" style="margin-left: 40px;" class="custom-input " />
              </el-form-item>
              <el-form-item label="婚姻状态" prop="maritalStatus" style="width: 45%;">
                <el-input v-model="addForm.maritalStatus" style="margin-left: 5px;" class="custom-input " />
              </el-form-item>
              <el-form-item label="职业" prop="occupation" style="width: 45%;">
                <el-input v-model="addForm.occupation" style="margin-left: 40px;" class="custom-input " />
              </el-form-item>
              <el-form-item label="文化程度" prop="education" style="width: 45%;">
                <el-input v-model="addForm.education" style="margin-left: 5px;" class="custom-input " />
              </el-form-item>
              <el-form-item label="籍贯" prop="hometown" style="width: 45%;">
                <el-input v-model="addForm.hometown" style="margin-left: 37px;" class="custom-input " />
              </el-form-item>
              <el-form-item label="健康师" prop="healthManager" style="width: 45%;">
                <el-input v-model="addForm.healthManager" style="margin-left: 20px;" class="custom-input " />
              </el-form-item>
              <el-form-item label="档案状态" prop="fileStatus" style="width: 45%;">
                <el-select
                  v-model="addForm.fileStatus"
                  placeholder="请选择活动区域"
                  style="margin-left: 8px;"
                  class="custom-input "
                >
                  <el-option label="启动 " value="1" />
                  <el-option label="禁用" value="0" />
                </el-select>
              </el-form-item>
              <el-form-item label="备注" prop="desc">
                <el-input
                  v-model="addForm.remarks"
                  type="textarea"
                  style="width: 550px;
  height: 40px;"
                />
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="动态信息" name="second">
            <el-form :inline="true" :model="form" class="demo-form-inline" style="flex: 1;">
              <el-form-item label="身高" prop="hometown" style="width: 20%;">
                <el-input style="margin-left: 5px;  width: 70px; height: 10px;" />
              </el-form-item>
              <el-form-item label="体重" prop="hometown" style="width: 24%;">
                <el-input style="margin-left: 5px;  width: 70px; height: 10px;" />
              </el-form-item>
              <el-form-item label="舒张压">
                <el-input style="margin-left: 5px;  width: 70px; height: 10px;" />
              </el-form-item>
              <el-form-item label="收缩压">
                <el-input style="margin-left: 5px;  width: 70px; height: 10px;" />
              </el-form-item>
              <el-form-item label="呼吸" prop="hometown" style="width: 45%;">
                <el-input style="margin-left: 37px;" class="custom-input " />
              </el-form-item>
              <el-form-item label="体温" prop="hometown" style="width: 45%;">
                <el-input style="margin-left: 37px;" class="custom-input " />
              </el-form-item>
              <el-form-item label="腰围" prop="hometown" style="width: 45%;">
                <el-input style="margin-left: 37px;" class="custom-input " />
              </el-form-item>
              <el-form-item label="臀围" prop="hometown" style="width: 45%;">
                <el-input style="margin-left: 37px;" class="custom-input " />
              </el-form-item>
              <el-form-item label="BMI" prop="hometown" style="width: 45%;">
                <el-input style="margin-left: 37px;" class="custom-input " />
              </el-form-item>
              <el-form-item label="血氧饱和度" prop="hometown" style="width: 45%;">
                <el-progress :percentage="percentage" :color="customColor" style="width: 200px" />
                <el-button-group>
                  <el-button icon="el-icon-minus" @click="decrease" />
                  <el-button icon="el-icon-plus" @click="increase" />
                </el-button-group>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="病史" name="third">
            <el-form ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="既往史" prop="desc">
                <el-input
                  type="textarea"
                  style="width: 550px;
  height: 40px;"
                />
              </el-form-item>
              <el-form-item label="家族史" prop="desc">
                <el-input
                  type="textarea"
                  style="width: 550px;
  height: 40px;"
                />
              </el-form-item>
              <el-form-item label="过敏史" prop="desc">
                <el-input
                  type="textarea"
                  style="width: 550px;
  height: 40px;"
                />
              </el-form-item>
              <el-form-item label="病史" prop="desc">
                <el-input
                  type="textarea"
                  style="width: 550px;
  height: 40px;"
                />
              </el-form-item>
              <el-form-item label="慢性病" prop="desc">
                <el-input
                  type="textarea"
                  style="width: 550px;
  height: 40px;"
                />
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
        <div slot="footer" class="dialog-footer">
          <el-button @click="opensaves()">取 消</el-button>
          <el-button type="primary" @click="openOk('保存成功');opensave = false">保 存</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>

import axios from 'axios'
export default {
  data() {
    return {
      percentage: 20,
      customColor: '#409eff',
      customColors: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 }
      ],
      checkList: [],
      activeName: 'first',
      updatefrom:
        {
          date: '',
          name: ''
        },
      addForm: {
        age: '',
        ethnicity: '',
        username: '',
        password: '',
        email: '',
        mobile: '',
        birthdate: '',
        maritalStatus: '',
        occupation: '',
        education: '',
        hometown: '',
        healthManager: '',
        fileStatus: '',
        remarks: '',
        gender: ''
      },
      opensave: false,
      UpdateData: false,
      form: '',
      dialogFormVisible: false,
      currentPage: 1,
      input: '',
      pageSize: 5,
      totalNum: 10,
      currentPages: 1,
      inputs: '',
      pageSizes: 5,
      totalNums: 10,
      tableData: [
      ],
      loading: false
    }
  },
  beforeCreate() {
    console.log('beforeCreate: 页面加载前执行方法')
    // axios.get("api/member/findAll").then(res => {
    //   console.log(res)
    //  this.tableData = res.data.data
    //   console.log(this.tableData.length)
    // })
  },
  mounted() {
    this.totalNum = this.tableData.length
  },
  methods: {
    customColorMethod(percentage) {
      if (percentage < 30) {
        return '#909399'
      } else if (percentage < 70) {
        return '#e6a23c'
      } else {
        return '#67c23a'
      }
    },
    increase() {
      this.percentage += 10
      if (this.percentage > 100) {
        this.percentage = 100
      }
    },
    decrease() {
      this.percentage -= 10
      if (this.percentage < 0) {
        this.percentage = 0
      }
    },
    search(bool) {
      this.currentPage = 1
      if (bool) {
        // 前端实现模糊查询--不用对接口
        const newListData = [] // 用于存放搜索出来数据的新数组
        if (this.input) {
          this.tableData.filter((item) => {
            if (item.name.indexOf(this.input) !== -1) {
              newListData.push(item)
            }
          })
        }
        this.tableData = newListData
      } else {
        axios.get('api/member/findAll').then(res => {
          console.log(res)
          this.tableData = res.data.data
          console.log(this.tableData.length)
        })
      }
    },
    handleClick(row) {
      console.log(row)
    },
    handleSizeChange(val) {
      this.pageSize = val
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.currentPage = val
      console.log(`当前页: ${val}`)
    },
    handleSizeChanges(val) {
      this.pageSizes = val
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChanges(val) {
      this.currentPages = val
      console.log(`当前页: ${val}`)
    },
    open() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    Updates(id) {
      this.UpdateData = true
      const data = this.tableData.find((da) => da.name === id)
      this.updatefrom.name = data.name
    },
    openUpdate() {
      this.$confirm('是否退出修改?', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '取消',
        cancelButtonText: '退出'
      })
        .then(() => {
          this.$message({
            type: 'info',
            message: '放弃退出,继续修改'
          })
        })
        .catch(action => {
          this.$message({
            type: 'info',
            message: action === 'cancel'
              ? '放弃修改并离开页面'
              : '停留在当前页面'
          })
          if (action !== 'close') {
            this.UpdateData = false
          }
        })
    },
    openUAdd() {
      this.$confirm('是否退出添加?', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '取消',
        cancelButtonText: '退出'
      })
        .then(() => {
          this.$message({
            type: 'info',
            message: '放弃退出,继续添加'
          })
        })
        .catch(action => {
          this.$message({
            type: 'info',
            message: action === 'cancel'
              ? '放弃添加并离开页面'
              : '停留在当前页面'
          })
          if (action !== 'close') {
            this.dialogFormVisible = false
          }
        })
    },
    opensaves() {
      this.$confirm('是否退出保存?', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '取消',
        cancelButtonText: '退出'
      })
        .then(() => {
          this.$message({
            type: 'info',
            message: '放弃退出'
          })
        })
        .catch(action => {
          this.$message({
            type: 'info',
            message: action === 'cancel'
              ? '放弃保存并离开页面'
              : '停留在当前页面'
          })
          if (action !== 'close') {
            this.opensave = false
          }
        })
    },
    openOk(val) {
      this.$message({
        message: val,
        type: 'success'
      })
    }
  }
}
</script>
<style>
.custom-form-item {
  margin-bottom: 20px; /* 调整el-form-item之间的垂直间距 */
}
.custom-input {
  width: 200px;
  height: 40px;
}

</style>
